<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
       <link rel="stylesheet" type="text/css" href="../../../css/aui.css" />
    <script src='../../../CommonTool/commonNetWork.js'></script>
    <script src="../../../script/jquery.js"></script>
</head>
<body>
    <header class="aui-bar aui-bar-nav" id="aui-header">
        <div class="aui-pull-left aui-btn" onclick="close_win();">
            <span class="aui-iconfont aui-icon-left"></span>返回
        </div>
        <div class="aui-title">基础-高级-表情模仿</div>
    </header>
        <section class="aui-grid marginBody">
            <div class="aui-row">
                <div class="aui-col-xs-1"></div>
                <div class="aui-col-xs-5">
                    <video controls id="ImitateVedio" style="height: 100%; width: 100%;">
                    <source  type="video/mp4" src="http://172.16.32.194/social/advanced/4-表情模仿/test3.mp4"></source>
                </video>
            </div>
               <div class="aui-col-xs-1"></div>
                <div class="aui-col-xs-4" >
                <img   id="PreviewBody" src="http://172.16.32.194/social/basic/4-表情模仿/像框.png" alt=""  />
                    <video id="videoPreview" autoplay playsinline style=" display: none;height: 100%; width: 100%;"></video>
                    <video id="playVedio"    controls style=" display: none;height: 100%; width: 100%;"></video>
                </div>
            <div class="aui-col-xs-1"></div>
        </div>
        <div class="aui-row">
            <div class="aui-col-xs-7"></div>
            <div class="aui-col-xs-4">
                <div class="aui-btn aui-btn-primary StyleButton" id="startButton" >开始模仿</div>
                <div class="aui-btn aui-btn-primary StyleButton" id="stopButton" style="display: none;">结束模仿</div>
                <div class="aui-btn aui-btn-primary StyleButton" id="playButton" style="display: none;">播放视频</div>
            </div>
        </div>
        </section>
        <div  class="footbar" >
            <p class="barLeft" onclick="toggleMenu()">第三关</p>
            <p class="barCenter">
                <div id="InitialButton" style="float:left;margin-left:4%;" onclick="InitialClick()">
                    <img id="passImg" src="http://172.16.32.194/commonButton/加号.png" alt="">
                </div> 
                    <div id="InitialButton1" style="float:left;margin-left:4%;display: none;" onclick="ShowInitialClick()">
                        <img id="passImg" src="http://172.16.32.194/commonButton/减号.png" alt="">
                    </div> 
                    <div id="InitialButton2" style="float:left; margin-left:3%;display: none;" >
                        <audio src="http://172.16.32.194/promptsound/像我这样做.mp3"   id="audioBody"  controls autoplay ></audio>  
                        <img style="width: 2rem;height: 1.6rem;margin-top:12%" src="http://172.16.32.194/commonButton/播放2.png" alt="" onclick="ImgAudioClick()">
                    </div> 
                    <!-- <div id="InitialButton4" style="float:left;margin-left:4%;display: none;">
                        <img style="width: 2rem;height:2rem;margin-top:6%" src="http://172.16.32.194/commonButton/刷新1.png" alt=""  onclick="ResetClick()">
                    </div>  -->
                 </p>
                 <p class="barright">
                    <img  src="../../../image/next2.png" alt=""  class="BarBottom" onclick="go_forward();">
                </p>
                <!-- <p class="barright">
                    <img  src="http://172.16.32.194/commonButton/prev1.png" alt=""  class="BarBottom" onclick="next_forward();">
                </p> -->
                <p class="barright">
                    <img style="width: 3.5rem;height: 1.5rem;margin-top:6%"  src="http://172.16.32.194/commonButton/pass1.png" onclick="passclick();">
                </p>
            
        </div>
             <!-- 通过 -->
 <div class="backdrop_bg" id="backdropPass">
    <audio src="http://172.16.32.194/commonButton/鼓掌音效.mp3" id="audioBodyPass"></audio>
    <div class="backdrop_contentPasseGif" >
    </div>
</div>
<!-- <div class="menu" id="menu">
    <div class="menu-item" onclick="goto_page(1)">第一关</div>
    <div class="menu-item" onclick="goto_page(2)">第二关</div>
    <div class="menu-item" onclick="goto_page(3)">第三关</div>
    <div class="menu-item" onclick="goto_page(4)">第四关</div>
    <div class="menu-item" onclick="goto_page(5)">第五关</div>
</div> -->
</body>
</html>
<script src="./ExpressionImitate.js"></script>
<script>
    var isRecording = true;
    var token = "";
    var userid = "";
    var currentTimestamp = "";
    var operationName = "";
    var additionalInfo = "";
    var groupId = "";
    var scene = "基础";
    var sceneLevel = "高级";
    var courseType = "表情模仿";
    var classSort = "3";
    var remarks = "";
    var moodType="生气";
    var classType = "泛化";
    let mediaRecorder;
    let chunks = [];
    let blob;
    let videoStream;
    var Nowdate = "";
    var NowdateString = "";
    let ImitatefileName = "";
// 用于存储摄像头视频流的变量
let stream;
      apiready = function() {
        isRecording = true
        document.getElementById('audioBody').style.display='none'
        const audio = document.getElementById('audioBody');
            audio.addEventListener('ended', () => {
                document.getElementById('ImitateVedio').play()
            })
        token = api.pageParam.token
        userid = api.pageParam.uid
        groupId = api.pageParam.groupId
        currentTimestamp = Date.now()
        operationName = 'ing'
        additionalInfo = ''
        CommonNetWork()  
      }
    function passclick(){
        document.getElementById('backdropPass').style.display='block'
        document.getElementById('audioBodyPass').play()
        setTimeout(()=>{
            document.querySelectorAll("audio").forEach((audio) => audio.pause())
            api.openWin({
            name: 'test4',
            url:'./test4.html',
            pageParam: {
                uid: userid,
                token:token,
                groupId:groupId
                },
            reload:true,
        })
        },2000)
        currentTimestamp = Date.now()
        operationName = 'ing'
        additionalInfo = 'right'
        CommonNetWork()
    }
        function go_forward(){
            document.getElementById('audioBody').pause()
        currentTimestamp = Date.now()
        operationName = 'end'
        additionalInfo = ''
        CommonNetWork()
        api.openWin({
              name: 'test4',
              url:'./test4.html',
              pageParam: {
                uid: userid,
                token:token,
                groupId:groupId
                },
              reload:true,
          })
    }
    function next_forward(){
        document.getElementById('audioBody').pause()
        currentTimestamp = Date.now()
        operationName = 'end'
        additionalInfo = ''
        CommonNetWork()
        api.openWin({
              name: 'test2',
              url:'./test2.html',
              pageParam: {
                uid: userid,
                token:token,
                groupId:groupId
                },
              reload:true,
          })
    }
    function goto_page(number) {
        const pages = [
            "test1",
            "test2",
            "test3",
            "test4",
            "test5",
        ];

        var name = pages[number - 1];
        var url = "./" + name + ".html";

        document.querySelectorAll("audio").forEach((audio) => audio.pause());

        currentTimestamp = Date.now();
        operationName = "end";
        additionalInfo = "";
        CommonNetWork();
        api.openWin({
            name: name,
            url: url,
            pageParam: {
                uid: userid,
                token: token,
                groupId: groupId,
            },
            reload: true,
        });
    }
    function toggleMenu() {
        var menu = document.getElementById("menu");
        if (menu.style.display === "none" || menu.style.display === "") {
            menu.style.display = "block";
        } else {
            menu.style.display = "none";
        }
    }
</script>